<template>
	<view :class="themeName">
		<view class=" client-level-list p-30">
			<u-alert-tips type="primary" :title="$zhTran('温馨提示：')" :show-icon="true" ifon="info-circle-fill"
				:title-style="alertTipStyle" :desc-style="alertTipStyle"
				:description="$zhTran('利润折扣等级数量最多可添加10个，可在编辑时删除，默认等级不能编辑或删除!')"></u-alert-tips>

			<view class="client-level-item m-t-30">

				<mescroll-uni ref="mescrollRef" :fixed="false" :up="{
					  auto: false,
					  noMoreSize: 5,
					  empty: {
					  	icon: $getImageUri('resource/image/shopapi/uniapp/empty/order.png'),
						tip: $zhTran('暂无折扣等级~'), // 提示
					  	fixed: true
					  }
				  }" :down="{ 
					  auto: true,
					}" :bottom="150" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<block v-for="(item, idx) in clientLevelList" :key="idx">
						<view class="client-level p-20 m-b-20">
							<view class="level-header flex row-between m-b-20">
								<view>
									<view class="title">{{item.title}}</view>
									<view class="desc">{{$zhTran('利润折扣等级')}}</view>
								</view>
								<view>
									<view class="discount">{{item.discount}}%</view>
									<view class="desc">{{$zhTran('销售折扣率')}}</view>
								</view>
							</view>
							<u-divider half-width="100%" :use-slot="false"></u-divider>
							<view class="footer flex row-between m-t-20">
								<view class="flex">
									<view class="avatar">
										<image src="@/bundle2/static/images/icon-user.png" mode="widthFix"></image>
									</view>
									<view class="flex m-l-10" style="color: rgba(128, 128, 128, 1);">{{$zhTran('当前客户')}}
										<text style="color: rgba(64, 115, 250, 1);">{{item.count}}</text> 人
									</view>
								</view>
								<view class="flex" v-if="!item.is_def">
									<view class="custom-btn m-r-20" @click="editLevel(item)">
										<u-icon name="edit-pen" color="rgba(56, 56, 56, 1)" size="26" class="m-r-10">
										</u-icon>
										<text>{{$zhTran('修改')}}</text>
									</view>
									<view class="custom-btn" @click="delLevel(item)">
										<u-icon name="trash" color="rgba(56, 56, 56, 1)" size="26" class="m-r-10">
										</u-icon>
										<text>{{$zhTran('删除')}}</text>
									</view>
								</view>
							</view>
						</view>
					</block>
				</mescroll-uni>
			</view>
		</view>
		<view class="functions">
			<button class="apply-btn" @click="addLevel">{{$zhTran('新增客户利润折扣等级')}}</button>
		</view>

		<u-popup v-model="showVisible" mode="bottom" border-radius="14" :closeable="false"
			:safe-area-inset-bottom="true" @close="closePop">
			<view class="p-30">
				<view class="level-header flex row-between m-b-20" v-if="form.mode == 'edit'">
					<view>
						<view class="title">{{form.oldtitle}}</view>
						<view class="desc">{{$zhTran('利润折扣等级')}}</view>
					</view>
					<view>
						<view class="discount">{{form.olddiscount}}%</view>
						<view class="desc">{{$zhTran('销售折扣率')}}</view>
					</view>
				</view>
				<u-divider half-width="100%" v-if="form.mode == 'edit'"></u-divider>
				<view class="m-b-20 m-t-20 bold">{{$zhTran(form.mode == 'add'?'新增折扣等级':'修改折扣')}}</view>
				<view>
					<u-field :label-width="170" v-model="form.title" :label="$zhTran('利润折扣等级')"
						:placeholder="$zhTran('请输入等级名称')"></u-field>
				</view>
				<view>
					<u-field :label-width="170" v-model="form.discount" :label="$zhTran('销售折扣率')"
						:placeholder="$zhTran('请输入折扣率')"></u-field>
				</view>
				<u-gap height="20" bg-color="rgba(246, 247, 249, 1)"></u-gap>
				<view class="price-footer flex row-between p-20">
					<view class="btn btn--cancel" @tap="closePop">{{$zhTran("取消")}}</view>
					<view class="btn btn--primary" @tap="saveNewLevel(1)">{{$zhTran('保存')}}</view>
				</view>
			</view>
		</u-popup>

		<u-modal v-model="showResult" width="540" :showCancelButton="true" :show-title="false"
			:cancel-text="$zhTran('关闭')" @cancel="showResult=false" cancel-color="rgba(38, 38, 38, 1)"
			border-radius="10" :show-confirm-button="false">
			<view class="p-30 text-center pop-result">
				<view class="flex row-center">
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gou2.png')" width="300" height="300"
						mode="widthFix" v-if="alertRes.status"></u-image>
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gantan-rejust.png')" width="300"
						height="300" mode="widthFix" v-else></u-image>
				</view>

				<view class="title m-t-20">{{alertRes.title}}</view>
				<view class="desc m-t-10">{{alertRes.desc}}</view>
			</view>
		</u-modal>

		<u-modal v-model="showQuestion" width="540" :showCancelButton="true" :show-title="false"
			:cancel-text="questionRes.status==1?$zhTran('取消'):$zhTran('关闭')" @cancel="showQuestion=false"
			cancel-color="rgba(38, 38, 38, 1)" border-radius="10"
			:show-confirm-button="questionRes.status==1?true:false" confirm-color="rgba(64, 115, 250, 1)"
			@confirm="questionRes.mode=='edit'?saveNewLevel(2):delLevelDeal()">
			<view class="p-30 text-center pop-result">
				<view class="flex row-center">
					<u-image :src="$getImageUri('/resource/image/shopapi/default/gantan-rejust.png')" width="300"
						height="300" mode="widthFix"></u-image>
				</view>

				<view class="title m-t-20">{{questionRes.title}}</view>
				<view class="desc m-t-10">{{questionRes.desc}}</view>
			</view>
		</u-modal>
	</view>
</template>


<script>
	import {
		apiCloudShopStoreClientLevel,
		apiCloudShopStoreClientLevelAdd,
		apiCloudShopStoreClientLevelEdit,
		apiCloudShopStoreClientLevelDel,
	} from "@/api/cloudshop"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		name: 'clientLevelList',
		mixins: [MescrollMixin],

		data() {
			return {
				clientLevelList: [],
				clsp_id: '',
				showVisible: false,
				form: {},
				alertRes: {
					status: 1,
					title: '',
					desc: ''
				},
				showResult: false,
				del_id: '',
				questionRes: {
					mode: '',
					status: 0,
					title: '',
					desc: ''
				},
				showQuestion: false,
			}
		},

		computed: {
			alertTipStyle() {
				return {
					color: 'rgba(64, 115, 250, 1)',
					'font-size': '24rpx'
				}
			}
		},

		methods: {
			refreshData() {
				this.$nextTick(() => {
					this.mescroll.resetUpScroll()
				})
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {
				apiCloudShopStoreClientLevel({
					store_id: this.clsp_id,
					page_no: num,
					page_size: size,
				}).then(({
					lists,
					page_size,
					count,
					extend
				}) => {
					if (num === 1) this.clientLevelList = []
					this.clientLevelList = [...this.clientLevelList, ...lists]
					this.clientLevelList = this.$zhTran(this.clientLevelList)
					this.mescroll.endSuccess(lists.length, count)
				}).catch(err => {
					this.mescroll.endErr()
				})
			},
			closePop() {
				this.showVisible = false
				this.form = {}
			},
			addLevel() {
				this.form = {
					mode: 'add',
					title: '',
					discount: ''
				}
				this.showVisible = true
			},
			editLevel(row) {
				this.form = {
					clevel_id: row.id,
					mode: 'edit',
					oldtitle: row.title,
					olddiscount: row.discount,
					title: row.title,
					discount: row.discount,
				}
				this.showVisible = true
			},
			saveNewLevel(type) {
				if (this.form.mode == 'edit' && type == 1) {
					this.questionRes = {
						mode: 'edit',
						status: 1,
						title: `确定修改 ${this.form.oldtitle} 折扣等级？`,
						desc: '此操作将影响客户折扣'
					}
					this.questionRes = this.$zhTran(this.questionRes)
					this.showQuestion = true
					return
				}
				var objapi = this.form.mode == 'edit' ? apiCloudShopStoreClientLevelEdit : apiCloudShopStoreClientLevelAdd
				objapi({
					store_id: this.clsp_id,
					...this.form,
				}).then(res => {
					this.alertRes = {
						status: 1,
						title: this.form.mode == 'edit' ? '修改成功' : '新增成功',
						desc: this.form.mode == 'edit' ? '等级折扣已修改成功' : ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
					this.clientLevelList = []
					this.mescroll.resetUpScroll();
				}).catch((err) => {
					this.alertRes = {
						status: 0,
						title: err,
						desc: ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
				}).finally(() => {
					this.closePop()
				})
			},
			delLevel(row) {
				if (row.count > 0) {
					this.questionRes = {
						mode: 'del',
						status: 0,
						title: '当前等级存在客户，无法删除',
						desc: '需清除该等级的客户才能删除'
					}
				} else {
					this.questionRes = {
						mode: 'del',
						status: 1,
						title: `确定删除 ${row.title} 折扣等级？`,
						desc: '此操作将影响客户折扣'
					}
					this.del_id = row.id
				}
				this.questionRes = this.$zhTran(this.questionRes)
				this.showQuestion = true
			},
			delLevelDeal() {
				console.log('del_id', this.del_id)
				apiCloudShopStoreClientLevelDel({
					clevel_id: this.del_id,
				}).then(res => {
					this.alertRes = {
						status: 1,
						title: '删除成功',
						desc: ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
					this.clientLevelList = []
					this.mescroll.resetUpScroll();
				}).catch((err) => {
					this.alertRes = {
						status: 0,
						title: err,
						desc: ''
					}
					this.alertRes = this.$zhTran(this.alertRes)
					this.showResult = true
				})
			}
		},

		async onLoad() {
			const {
				clsp_id,
			} = this.$Route.query
			this.clsp_id = clsp_id
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			this.refreshData()
			setTimeout(() => {}, 0.5 * 1000)
		},
		onUnload() {},
	}
</script>


<style lang="scss">
	.client-level-item {
		height: calc(100vh - 160rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 160rpx - env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.client-level {
		background-color: #fff;
		border-radius: 10rpx;

		.footer {
			.avatar {
				image {
					width: 50rpx;
				}
			}

			.custom-btn {
				padding: 12rpx 30rpx;
				font-size: 28rpx;
				border: 1rpx solid rgba(229, 229, 229, 1);
			}
		}
	}

	.level-header {
		.title {
			color: rgba(0, 0, 0, 1);
			font-size: 32rpx;
			font-weight: bold;
		}

		.discount {
			color: rgba(64, 115, 250, 1);
			font-size: 32rpx;
			font-weight: bold;
		}

		.desc {
			color: rgba(128, 128, 128, 1);
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}


	.functions {
		position: fixed;
		z-index: 9999;
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding: 0 30rpx constant(safe-area-inset-bottom) 30rpx;
		padding: 0 30rpx env(safe-area-inset-bottom) 30rpx;
	}

	.apply-btn {
		background-color: rgba(64, 115, 250, 1);
		color: #fff;
		font-size: 28rpx;
	}

	.price-footer {

		.btn {
			width: 50%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 10rpx;


			&--primary {
				color: #fff;
				background-color: rgba(64, 115, 250, 1);
			}
		}
	}

	.pop-result {
		.title {
			font-size: 32rpx;
			color: rgba(38, 38, 38, 1);
		}

		.desc {
			font-size: 24rpx;
			color: rgba(166, 166, 166, 1);
		}
	}
</style>